<template>
  <div>
    <header class="header">
      <div class="header-left">
        <el-button @click="$router.push('/student/dashboard')" link class="back-button">
          <img src="@/assets/svgs/left.svg" alt="Back" />
        </el-button>
        <span class="title">课堂质量实时反馈</span>
      </div>
    </header>
    
    <!-- 添加空状态提示 -->
    <div v-if="loading" class="feedback-empty">
      <el-loading :fullscreen="false"></el-loading>
    </div>
    <div v-else-if="feedbacks.length === 0" class="feedback-empty">
      <el-empty description="暂无反馈问卷"></el-empty>
    </div>
    
    <div v-else class="feedback-card-list">
      <div v-for="feedback in feedbacks" :key="feedback.id" class="feedback-card">
        <div class="feedback-header">
          <img src="@/assets/svgs/feedback.svg" alt="反馈" class="feedback-icon" />
          <div class="feedback-title">{{ feedback.surveyName }}</div>
        </div>
        <div class="blue-bar"></div>
        <div class="feedback-teacher">教师：{{ feedback.teacherName || '未知教师' }}</div>
        <div class="course-info">课程：{{ feedback.courseName }}</div>
        <div class="feedback-dates">开始时间：{{ formatDate(feedback.createTime) }}</div>
        <div class="button-container">
          <el-button
            v-if="feedback.state !== '已填写'"
            @click="handleFeedbackClick(feedback)"
            class="write-button"
            type="primary"
          >
            填写反馈
          </el-button>
          <div v-else class="submitted-text">已填写</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { surveyListService } from '@/api/feedback';
import { getStudentCourseList } from '@/api/course';

const router = useRouter();
const feedbacks = ref([]);
const loading = ref(true);

const fetchFeedbacks = async () => {
  try {
    // 1. 获取学生的所有课程
    const coursesResult = await getStudentCourseList();
    console.log('课程列表:', coursesResult);

    if (coursesResult.code !== 0 || !coursesResult.data) {
      throw new Error('获取课程列表失败');
    }

    // 2. 获取所有课程的问卷
    const allFeedbacks = [];
    for (const course of coursesResult.data) {
      try {
        // 使用课程的 courseManageId 获取问卷
        const result = await surveyListService(course.courseManageId);
        console.log(`获取课程 ${course.courseManageId} 的问卷结果:`, result); // 调试信息
        if (result.code === 0 && result.data) {
          // 将每个课程的问卷添加到总列表中
          allFeedbacks.push(...result.data.map(item => ({
            ...item,
            courseName: course.courseName,
            teacherName: course.teacherName || '未知教师' // 确保教师名称正确
          })));
        }
      } catch (error) {
        console.error(`获取课程 ${course.courseManageId} 的问卷失败:`, error);
        // 继续获取其他课程的问卷
      }
    }

    feedbacks.value = allFeedbacks;
    console.log('所有反馈数据:', feedbacks.value); // 调试信息
  } catch (error) {
    console.error('获取反馈列表失败:', error);
    ElMessage.error('获取反馈列表失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 处理填写反馈按钮点击
const handleFeedbackClick = (feedback) => {
  if (feedback.state === '已填写') {
    ElMessage.warning('您已经填写过该反馈');
    return;
  }

  router.push({
    path: '/student/suggestion/index',
    query: {
      surveyId: feedback.id
    }
  });
};

const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

onMounted(async () => {
  await fetchFeedbacks();
});

</script>

<style>
.template {
  background-color: #F9FAFB;
}
.header {
  color: white;
  height: 30px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  background-color: #13227a;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.back-button {
  color: white;
  border: none;
  width: 25px;
  height: 25px;
}

.title {
  font-size: 16px;
}

.header-right {
  display: flex;
}

.write-button {
  background-color: #13227a;
  border: none;
  color: white;
  width: 100px;
  height: 30px;
  border-radius: 4px;
  font-size: 14px;
  padding: 5px 10px;
}

.feedback-card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
  padding: 0 40px;
}

.feedback-card {
  background-color: white;
  border: none;
  border-radius: 8px;
  padding: 16px;
  height: 180px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.feedback-title {
  font-weight: bold;
  color: black;
  font-size: 20px;
}

.feedback-dates {
  color: gray;
  font-size: 14px;
}

.feedback-submission {
  color: darkgray;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result-button {
  background-color: #13227a;
  color: white;
  margin-top: auto;
  align-self: flex-end;
}

.custom-message-box {
  width: 400px !important;
  padding: 30px 20px !important;
}

.custom-message-box .el-message-box__message {
  font-size: 16px !important;
  padding: 20px 0 !important;
}

.custom-message-box .custom-confirm-button {
  background-color: #13227a !important;
  border-color: #13227a !important;
}

.custom-message-box .el-message-box__btns button {
  font-size: 14px !important;
  padding: 12px 20px !important;
}

.blue-bar {
  height: 4px;
  width: 40px;
  background-color: #13227a;
  border-radius: 2px;
  margin: 8px 0;
}

.button-container {
  position: absolute;
  bottom: 16px;
  right: 16px;
}

.submitted-text {
  color: #909399;
  font-size: 14px;
  padding: 8px 16px;
}

/* 可选：添加一个禁用状态的样式 */
.write-button[disabled] {
  background-color: #909399;
  cursor: not-allowed;
}

.feedback-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  width: 100%;
}

/* 调整 Element Plus 的 Empty 组件样式 */
:deep(.el-empty) {
  padding: 40px 0;
}

:deep(.el-empty__description) {
  margin-top: 20px;
  color: #909399;
}

.course-info {
  font-size: 14px;
  color: gray;
  margin-top: 4px;
}

.feedback-teacher {
  font-size: 14px;
  color: gray;
  margin-top: 4px;
}
</style>
